<template>
  <header class="header">
    <h1>todos</h1>
    <input
      class="toggle-all"
      type="checkbox"
      id="toggle-all"
      :checked="allDone"
      @change="allIWanted({ iChecked }), (iChecked = iCheckedIN)"
    />
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      v-model.trim="taskSentence"
      @keydown.enter="addList({ sentence: taskSentence }), (taskSentence = '')"
    />
  </header>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";
export default {
  props: [],
  data() {
    return {
      taskSentence: "",
      iChecked: true,
    };
  },
  methods: {
    ...mapMutations(["addList", "allIWanted"]),
  },
  computed: {
    ...mapGetters(["allDone"]),
    ...mapState(["iCheckedIN"]),
  },
};
</script>